<template>
	<div style="height: 100%;width: 100%;display: flex;flex-direction: column;">
		<div
			style="display: flex;flex-direction: row;margin-left: 2%;width: 96%;justify-content: space-between; margin-top: 1%;align-items: center;">
			<span>在线无人机列表</span>
			<div style="display: flex;flex-direction: row; align-items: center;">
				<el-button type="primary" style="margin-left: 1%;" size="small" @click="openSimu()">打开仿真</el-button>
				<el-button type="danger" style="margin-left: 2%;" size="small" @click="closeSimu()">关闭仿真</el-button>
				<el-button type="success" style="margin-left: 2%;" size="small" @click="getNewInfo()">刷新数据</el-button>
			</div>
		</div>

		<el-table :data="showData" height="95%" style="margin-left: 2%; width: 96%;">
			<el-table-column prop="dronedeviceid" label="实例id"></el-table-column>
			<el-table-column prop="dronedevicename" label="实例名"></el-table-column>
			<el-table-column prop="dronedevicesn" label="实例sn"></el-table-column>
			<el-table-column prop="dronedevicetype" label="实例类型"></el-table-column>
			<el-table-column prop="dronemodelid" label="型号id"></el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope" style="display: flex;flex-direction: row; flex-wrap: nowrap;">
					<el-button @click="handleControl(scope.row)" type="text" size="small">实时控制</el-button>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
	import axios from "axios"
	import webSetInfo from "@/utils/webSetInfo";
	export default {

		data() {
			return {
				showData: [],
				userinfo: {},
			}
		},
		mounted() {
			this.userinfo = JSON.parse(localStorage.getItem("userinfo"))
			if (this.userinfo == null) {
				this.$router.push({
					path: '/login'
				})
			} else {
				this.getNewInfo()
			}
		},
		methods: {
			openSimu() {
				var that = this
				axios({
						url: `${webSetInfo.apiUrl}` + `/openSimu`,
						method: "post",
						data: {
							requestCode: '027',
						},
						headers: {
							'Content-Type': 'application/x-www-form-urlencoded'
						}
					})
					.then(function(response) {
						var data = response.data
						var result = data.result
						if (result == 1) {
							that.$message({
								type: 'success',
								message: '开启成功，请刷新'
							})
						} else {
							that.$message.error("未知错误")
						}
					})
			},
			closeSimu() {
				var that = this
				axios({
						url: `${webSetInfo.apiUrl}` + `/closeSimu`,
						method: "post",
						data: {
							requestCode: '028',
						},
						headers: {
							'Content-Type': 'application/x-www-form-urlencoded'
						}
					})
					.then(function(response) {
						var data = response.data
						var result = data.result
						if (result == 1) {
							that.$message({
								type: 'success',
								message: '关闭成功，请刷新'
							})
						} else {
							that.$message.error("未知错误")
						}
					})
			},
			handleControl(e) {
				this.$router.push({
					path: '/controlpane',
					query: {
						dronedeviceid: e.dronedeviceid,
						dronedevicename: e.dronedevicename,
					}
				})
			},
			getNewInfo() {
				var that = this
				axios({
						url: `${webSetInfo.apiUrl}` + `/getNewInfo`,
						method: "post",
						data: {
							requestCode: '012',
							userid: that.userinfo.userid,
							token: that.userinfo.token,
						},
						headers: {
							'Content-Type': 'application/x-www-form-urlencoded'
						}
					})
					.then(function(response) {
						var data = response.data
						var result = data.result
						if (result == 1) {
							if (data.data.length == 0) {
								that.$message.error("暂无更多数据")
							}
							that.loadData(data.data)

						} else if (result == 0) {
							that.tokenExpire()
						}
					})
			},
			//token过期
			tokenExpire: function() {
				this.$router.push({
					path: '/login',
				})
			},
			//装载data
			loadData(e) {
				this.showData = e
			}
		}
	}
</script>

<style>
</style>
